<template>
  <div class="pop">
    <div class="pop__body" :style="{ width, minHeight: height }">
      <div class="pop__body__title">
        <span>{{ title }}</span>
        <i class="pop__title--close" @click="visible = false">X</i>
      </div>
      <div class="pop__body__content">
        <slot></slot>
      </div>
      <div class="pop__body__operator">
        <r-button @click="onConfirm">确 定</r-button>
        <r-button type="cancel" @click="visible = false">取 消</r-button>
      </div>
    </div>
  </div>
</template>

<script>
import RButton from "./RButton";
import { ref, watch } from "vue";

export default {
  name: "RPop",
  components: { RButton },
  props: {
    modelValue: Boolean,
    title: String,
    width: {
      type: String,
      default: "0",
    },
    height: {
      type: String,
      default: "0",
    },
  },
  setup(props, ctx) {
    const visible = ref(props.modelValue);

    watch(visible, (newVal) => {
      ctx.emit("update:modelValue", newVal);
    });
    watch(
      () => props.modelValue,
      (newVal) => {
        visible.value = newVal;
      }
    );

    const onConfirm = () => ctx.emit("confirm");
    return {
      visible,
      onConfirm,
    };
  },
};
</script>

<style scoped lang="less">
@keyframes pop-bg-anime {
  from {
    background: rgba(0, 0, 0, 0);
  }
}

@keyframes pop-content-anime {
  from {
    transform: translateX(-50%) scale(0);
  }
}

.pop {
  font-size: 12px;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  left: 0;
  top: 0;
  z-index: 98;
  @animeAct: 0.2s linear forwards;
  animation: pop-bg-anime @animeAct;

  &__body {
    position: fixed;
    left: 50%;
    top: 50px;
    transform: translateX(-50%) scale(1);
    background: white;
    border-radius: 3px;
    overflow: hidden;
    animation: pop-content-anime @animeAct;

    @contentPadding: 5px 15px;

    &__title {
      display: flex;
      justify-content: space-between;
      background: lightskyblue;
      color: white;
      font-weight: bold;
      padding: @contentPadding;

      i {
        cursor: pointer;
      }
    }
    &__content {
      padding: 8px;
    }

    &__operator {
      margin-bottom: 10px;
    }
  }
}
</style>
